<template>
	<div class="content">
		<h2><i class="iconfont icon-shangjia"></i>添加管理员</h2>
		<div class="content-wrap">
			<div class="ct-left">
				<div class="list">
					<div class="title">管理员名称</div>
					<div class="ipt">
						<el-input size="small" v-model="params.username"></el-input>
					</div>
				</div>
				<div class="list">
					<div class="title">密&nbsp;&nbsp;码</div>
					<div class="ipt">
						<el-input size="small" type="password" v-model="params.password"></el-input>
					</div>
				</div>
				<div class="list">
					<div class="title">重复密码</div>
					<div class="ipt">
						<el-input size="small" type="password" v-model="password2"></el-input>
					</div>
				</div>
				<div class="list">
					<div class="title">管理员描述</div>
					<div class="ipt">
						<el-input size="small" type="textarea" v-model="params.description"></el-input>
					</div>
				</div>
				<div class="list">
					<div class="title">头像上传</div>
					<div class="upload fl" v-loading="loading">
						<el-upload
							class="upload-avatar"
						    :before-upload="handleUploading"
						    :action="uploadAvatarUrl"
						    :show-file-list="false"
						    :on-success="handleSuccess"
						  >
						<img :src="params.avatar" alt="" v-if="params.avatar" class="avator" @load="loading = false"/>
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</div>
					<ul class="tip">
						<li>1.最佳头像大小100*100</li>
						<li>2.图片格式限制为jpg,png,jpeg,gif</li>
						<li>3.图片大小不超过1M</li>
					</ul>
				</div>
			</div>
			<div class="ct-right">
				<div class="list">
					<div class="title">权限列表</div>
					<div>
						<el-transfer 
							:data="permissionData"
							filterable
							filter-placeholder="搜索权限"
							v-model="params.selectPermissions"
							:button-texts="['删除权限', '添加权限']"
							:titles="['所有权限', '已分配权限']">
						</el-transfer>
					</div>
				</div>
				<div class="submit">
					<el-button type="success" @click="addAdmin">添加管理员</el-button>
				</div>			
			</div>
			
		</div>
		<!---->
	</div>
</template>

<script>
	/*const data = [{
		key: 1,
		label: "添加商品"
	},{
		key: 2,
		label: "添加活动"
	},{
		key: 3,
		label: "审核区域经理"
	},{
		key: 4,
		label: "审核推广大使"
	}]*/
	import data from "../../../static/json/permissions.json"
	export default {
		data() {
			return {
				params: {
					selectPermissions: [],				//用户权限
					username: "",						//用户名
					password: "",						//密码
					description: "",					//用户描述
					avatar: ""							//头像
				},
				
				password2: "",//重复密码
				uploadAvatarUrl: `${this.url}/upload/image_save.action`,			//图片上传url
				permissionData: data,//后台获取的所有权限
				loading: false,//图片加载小圆圈
			};
		},
		methods: {
			//图片上传成功
			handleSuccess(res, file) {
				if (res.success) {
					this.params.avatar = res.result.url;
				}else {
					this.loading = false;
					this.$message({
						type: "danger",
						message: "上传出错了！！！！"
					});
				}
			},
			//图片上传的时候对图片进行验证
			handleUploading(file) {
				const isJpg = file.type === "image/jpeg";
				const isPng = file.type === "image/png";
				const isGif = file.type === "image/gif";
				const isLg1M = file.size/(1024*1024*1) < 1;
				if (!isJpg && !isPng && !isGif) {
					this.$message({
						type: "warning",
						message: "清上传正确的图片格式"
					});
					return false;
				}
				if (!isLg1M) {
					this.$message({
						type: "warning",
						message: "图片大小不能超过0.5M"
					});
					return false;
				}
				return true;
			},
			//添加一个管理员
			addAdmin() {
				const username = this.params.username;
				const password = this.params.password;
				const password2 = this.password2;
				const description = this.params.description;
				const avatar = this.params.avatar;
				const permissions = this.params.selectPermissions;					
				if (username.replace(/\s/g, "") === "") {
					this.$message({
						type: "warning",
						message: "用户名不允许为空"
					});
					return;
				}else if (password.length < 6) {
					this.$message({
						type: "warning",
						message: "密码长度不能小于6位"
					});
					return;
				}else if(password !== password2) {
					this.$message({
						type: "warning",
						message: "两次输入的密码不一致"
					});
					return;
				}else if (permissions.length === 0) {
					this.$message({
						type: "warning",
						message: "请至少给管理员分配一个权限"
					});
					return;
				}		
			}
		}
	}
</script>

<style lang="scss">
	.content {
		position: relative;
		width: 87%;
		background: #f2f2f2;
		>h2 {
			background: #f9f9f9;
			border-bottom: 1px solid #ccc;
			padding: 10px 0;
			font-weight: normal;
			text-indent: 3rem;
			font-size: 1.3rem;
			color: #555;
			i {
				margin-right: 1rem;
			}
		}
	}
	/*内容区域*/
	.content-wrap {
		display: flex;
		.list {
			.title {
				color: #008489;
				font-size: 16px;
				margin: 1rem 0;
			}
			.ipt {
				width: 300px;
			}
			.tip {
				float: left;
				margin-left: 20px;
				color: #666;
				li {
					margin-bottom: 20px;
				}
			}
		}
	}
	/*填写用户基本信息*/
	.ct-left {
		flex: 0 0 40%;
		border-right: 1px solid #aaa;
		padding: 2rem;
		.upload {
			border: 1px dotted #ccc;
			border-radius: 5px;
		}
		.upload:hover {
			border: 1px dotted #2cf;
		}
		.avator {
			width: 130px;
			height: 130px;
		}
		.avatar-uploader-icon {
			font-size: 30px;
			color: #999;
			width: 130px;
			height: 130px;
			line-height: 130px;
			text-align: center;
		}
	}
	/*给用户分配权限*/
	.ct-right {
		flex: 0 0 60%;
		padding: 2rem;
		.submit {
			margin-top: 30px;
			text-align: center;
		}
		.el-transfer-panel__body {
			height: 400px;		
		}
		.el-transfer-panel__list.is-filterable {
			height: 400px;
		}
	}
	/*每一项的基本信息填写*/


</style>